<template>
  <div class="info-container">
    <!-- titele部分 -->
    <h3 class="title">{{ newsinfo.title }}</h3>
    <!-- 子title部分 -->
    <p class="subtitle">
      <span>发表时间：{{ newsinfo.add_time | dateFormat("YYYY-MM-DD HH:mm")}}</span>
      <span>点击：{{ newsinfo.click }}次</span>
    </p>
    <hr />
    <!-- 内容区域-->
    <div class="content" v-html="newsinfo.content"></div>

    <!-- 评论区域 子组件-->
    <comment-box :id = "this.id"> </comment-box> 
  </div>
</template>

<script>

//导入子组件
import comment from '../subcomponents/comment.vue'

export default {
  data() {
    return {
      id: this.$route.params.id,

      newsinfo: {},
    };
  },

  created() {

      this.getNewsInfo()

  },

  methods: {
    getNewsInfo() {
      this.$http.get("api/getnew/" + this.id).then((result) => {
        if (result.body.status === 0) {
          this.newsinfo = result.body.message[0];
        } else {
          this.$message({
            message: "失败",
            type: "error",
          });
        }
      });
    },
  },

  components: {

  "comment-box" : comment

  }

};
</script>

<style lang="scss" scoped>
.info-container {
  padding: 0 5px;

  .title {
    font-size: 14px;
    text-align: center;
    margin: 15px;
    color: lightcoral;
  }

  .subtitle {
    font-size: 12px;
    color: darkblue;
    display: flex;
    justify-content: space-between;
    margin-bottom: -10px;
  }

  .content {
  }
}
</style>